import React, { useEffect, useState } from "react";
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { imgUrlPrefix } from "@/common/config";
import ListStatusInfo from "@/components/ListStatusInfo";

import * as api from "./api";
import "./index.scss";

const Index: React.FC<{}> = () => {
  const [data, setData] = useState<{
    payment_list: any[];
    strike_price: number;
    actual_amount: number;
  }>({ payment_list: [], strike_price: 0, actual_amount: 0 });
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState<number | null>(null);
  const [searchInfo, setSearchInfo] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  useEffect(() => {
    if (JSON.parse(router.params.params)) {
      setData(JSON.parse(router.params.params));
    }
  }, [router]);

  // const getData = async () => {
  //   try {
  //     setLoading(true);
  //     const { result, status } = await api.customer_contract_search({});
  //     if (status === "ok") {
  //       setData(result.data_list);
  //     }
  //   } catch (err) {
  //     console.log("err--------->>>", err);
  //   } finally {
  //     setLoading(false);
  //   }
  // };

  // useDidShow(() => {
  //   getData();
  // });

  return (
    <View className="pay-record-page">
      <View className="header">
        成交金额：￥{(data.strike_price / 100).toFixed(2)} 已付款：￥
        {(data.actual_amount / 100).toFixed(2)}
      </View>

      <View className="list-wrapper">
        {data.payment_list.map((item) => (
          <View className="item" key={item.id}>
            <View className="item__top">
              <View className="item__top__l">
                <View className="item__top__l__name">{item.pay_type}</View>
                {item.status && (
                  <View className="item__top__l__status">{item.status}</View>
                )}
              </View>
              <View className="item__top__r">
                ￥{(item.amount / 100).toFixed(2)}
              </View>
            </View>
            <View className="item__bottom">
              <View className="bottom__number">付款单号：{item.number}</View>
              <View className="bottom__time">{item.create_time}</View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

export default Index;
